<template>
  <div>
      <TopBar>修改密码</TopBar>
      <div class="content"  style="margin-top:1.5rem">
        <InputType title="手机号" class="vux-1px-tb" type1="1" @getPhone="getPhone"></InputType>
        <InputType title="验证码" class="vux-1px-b" type1="2"  @getValue="getValue" type="forget" :phone1="phone"></InputType>
        <InputType title="新密码" class="vux-1px-b" type1="3" @getPwd="getPwd"></InputType>
        <div class="setPwdBtn" @click="submit" :style="bg">确定</div>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import InputType from './children/inputType'
import { Toast } from 'vux'
import {verify,showMsg} from '../../../config/mUtils'
import {forget} from '../../../service/getData'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    TopBar,
    InputType,
    Toast,
  },
  beforeCreate(){
      getSDK()
    },
  data(){
    return {
      phone:'',
      code:'',
      pwd:'',
      showPositionValue:false,
      msg:''
    }
  },
  computed:{
    bg(){
      if(this.phone.length != 0 && this.pwd.length != 0&&this.code.length!=0){
        return 'backgroundColor:#e44c2c'
      }
    }
  },
  methods:{
    getPhone(data){
      this.phone = data
    },
    getValue(data){
      this.code = data
    },
    getPwd(data){
      this.pwd = data
    },
    submit(){
      // //console.log(`${this.phone}/${this.code}/${this.pwd}`)
      if(this.phone == ''){
        showMsg('手机号不能为空',this)
      }else if(this.code == ''){
        showMsg('验证码不能为空',this)
      }else if(this.pwd == ''){
        showMsg('密码不能为空',this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }else if(!verify(this.pwd,2)){
        showMsg("密码为6-16位非汉字字符",this)
      }else if(!verify(this.code,3)){
        showMsg("验证码格式错误",this)
      }else{
        forget(this.phone,this.code,this.pwd)
          .then(res=>{
            if(res.status == 1){
              time = setTimeout(()=>{
                removeStore('loginkey')
                removeStore('phone')
                removeStore('pre')
                this.$router.replace('/login')
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .content{
    .wh(8.3467rem,100%);
    margin: 0 auto;
    margin-top: .4rem;
    .setPwdBtn{
      .wh(8.3467rem,1.1733rem);
      .bg(#d4d4d4);
      .borderRadius(2rem);
      .sc(.4rem,#fff);
      line-height: 1.1733rem;
      text-align: center;
      margin-top: 1.0667rem;
    }
    .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
  }
</style>
